﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="@Url.Content("~/css/bootstrap.min.css")" />
    <link rel="stylesheet" href="@Url.Content("~/font-awesome/4.2.0/css/font-awesome.min.css")" />

    <!-- text fonts -->
    <link rel="stylesheet" href="@Url.Content("~/css/fonts.googleapis.com.css")" />

    <!-- ace styles -->
    <link rel="stylesheet" href="@Url.Content("~/css/ace.min.css")" />

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="@Url.Content("~/css/ace-part2.min.css")" />
    <![endif]-->
    <link rel="stylesheet" href="@Url.Content("~/css/ace-rtl.min.css")" />

    <!--[if lte IE 9]>
      <link rel="stylesheet" href="@Url.Content("~/css/ace-ie.min.css")" />
    <![endif]-->
    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
    <!--[if lte IE 8]>
    <script src="@Url.Content("~/js/html5shiv.min.js")"></script>
    <script src="@Url.Content("~/js/respond.min.js")"></script>
    <![endif]-->
</head>

<body class="login-layout light-login">
    <div class="main-container">
        <div class="main-content">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="login-container">
                        <div class="center">
                            <h2>
                                <i class="fa fa-list-alt grey"></i>
                                <span class="grey chs">@ViewBag.title</span>
                            </h2>
                            <h4 class="blue">&copy; 青云科技</h4>
                        </div>

                        <div class="space-6"></div>

                        <div class="position-relative">
                            <div id="login-box" class="login-box visible widget-box no-border">
                                <div class="widget-body">
                                    <div class="widget-main">
                                        <h4 class="header blue lighter bigger">
                                            <i class="ace-icon fa fa-desktop"></i>
                                            系统登录
                                        </h4>

                                        <div class="space-6"></div>

                                        <form>
                                            <fieldset>
                                                <label class="block clearfix">
                                                    <span class="block input-icon">
                                                        <input id="txtName" type="text" class="form-control" placeholder="用户名" />
                                                        <i class="ace-icon fa fa-user"></i>
                                                    </span>
                                                </label>

                                                <label class="block clearfix">
                                                    <span class="block input-icon">
                                                        <input id="txtPwd" type="password" class="form-control" placeholder="密码" />
                                                        <i class="ace-icon fa fa-lock"></i>
                                                    </span>
                                                </label>

                                                <label class="block clearfix" id="labCode">
                                                    <span class="block input-icon">
                                                        <input id="txtCode" type="text" class="form-control" style="float:left;width:70%" placeholder="验证码" autocomplete="off" />
                                                        <img style="float:right;cursor:pointer;width:30%;height:34px;" title="点击更换验证码" id="imgCode" src="/Account/GetValidateCode" />
                                                        <i class="ace-icon fa fa-check"></i>
                                                    </span>
                                                </label>

                                                <label id="txtTips" class="block clearfix" style="text-align:center;color:red;display:none;">
                                                </label>
                                                <div class="space"></div>

                                                <div class="clearfix">
                                                    <label class="inline">
                                                        <input type="checkbox" class="ace" />
                                                        <span class="lbl"> 下次自动登录</span>
                                                    </label>

                                                    <button id="btnLogin" type="button" class="width-35 pull-right btn btn-sm btn-primary">
                                                        <i class="ace-icon fa fa-key"></i>
                                                        <span class="bigger-110">登录</span>
                                                    </button>
                                                </div>

                                                <div class="space-4"></div>
                                            </fieldset>
                                        </form>
                                    </div><!-- /.widget-main -->

                                    <div class="toolbar clearfix">
                                        <div>
                                            <a href="#" data-target="#forgot-box" class="forgot-password-link">
                                                <i class="ace-icon fa fa-arrow-left"></i>
                                                忘记密码？
                                            </a>
                                        </div>

                                        <div>
                                            <a href="#" data-target="#signup-box" class="user-signup-link">
                                                注册
                                                <i class="ace-icon fa fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div><!-- /.widget-body -->
                            </div><!-- /.login-box -->
                            <div id="forgot-box" class="forgot-box widget-box no-border">
                                <div class="widget-body">
                                    <div class="widget-main">
                                        <h4 class="header red lighter bigger">
                                            <i class="ace-icon fa fa-key"></i>
                                            Retrieve Password
                                        </h4>

                                        <div class="space-6"></div>
                                        <p>
                                            Enter your email and to receive instructions
                                        </p>

                                        <form>
                                            <fieldset>
                                                <label class="block clearfix">
                                                    <span class="block input-icon input-icon-right">
                                                        <input type="email" class="form-control" placeholder="Email" />
                                                        <i class="ace-icon fa fa-envelope"></i>
                                                    </span>
                                                </label>

                                                <div class="clearfix">
                                                    <button type="button" class="width-35 pull-right btn btn-sm btn-danger">
                                                        <i class="ace-icon fa fa-lightbulb-o"></i>
                                                        <span class="bigger-110">Send Me!</span>
                                                    </button>
                                                </div>
                                            </fieldset>
                                        </form>
                                    </div><!-- /.widget-main -->

                                    <div class="toolbar center">
                                        <a href="#" data-target="#login-box" class="back-to-login-link">
                                            Back to login
                                            <i class="ace-icon fa fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div><!-- /.widget-body -->
                            </div><!-- /.forgot-box -->

                            <div id="signup-box" class="signup-box widget-box no-border">
                                <div class="widget-body">
                                    <div class="widget-main">
                                        <h4 class="header green lighter bigger">
                                            <i class="ace-icon fa fa-users blue"></i>
                                            New User Registration
                                        </h4>

                                        <div class="space-6"></div>
                                        <p> Enter your details to begin: </p>

                                        <form>
                                            <fieldset>
                                                <label class="block clearfix">
                                                    <span class="block input-icon input-icon-right">
                                                        <input type="email" class="form-control" placeholder="Email" />
                                                        <i class="ace-icon fa fa-envelope"></i>
                                                    </span>
                                                </label>

                                                <label class="block clearfix">
                                                    <span class="block input-icon input-icon-right">
                                                        <input type="text" class="form-control" placeholder="Username" />
                                                        <i class="ace-icon fa fa-user"></i>
                                                    </span>
                                                </label>

                                                <label class="block clearfix">
                                                    <span class="block input-icon input-icon-right">
                                                        <input type="password" class="form-control" placeholder="Password" />
                                                        <i class="ace-icon fa fa-lock"></i>
                                                    </span>
                                                </label>

                                                <label class="block clearfix">
                                                    <span class="block input-icon input-icon-right">
                                                        <input type="password" class="form-control" placeholder="Repeat password" />
                                                        <i class="ace-icon fa fa-retweet"></i>
                                                    </span>
                                                </label>

                                                <label class="block">
                                                    <input type="checkbox" class="ace" />
                                                    <span class="lbl">
                                                        I accept the
                                                        <a href="#">User Agreement</a>
                                                    </span>
                                                </label>

                                                <div class="space-24"></div>

                                                <div class="clearfix">
                                                    <button type="reset" class="width-30 pull-left btn btn-sm">
                                                        <i class="ace-icon fa fa-refresh"></i>
                                                        <span class="bigger-110">Reset</span>
                                                    </button>

                                                    <button type="button" class="width-65 pull-right btn btn-sm btn-success">
                                                        <span class="bigger-110">Register</span>

                                                        <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                                                    </button>
                                                </div>
                                            </fieldset>
                                        </form>
                                    </div>

                                    <div class="toolbar center">
                                        <a href="#" data-target="#login-box" class="back-to-login-link">
                                            <i class="ace-icon fa fa-arrow-left"></i>
                                            Back to login
                                        </a>
                                    </div>
                                </div><!-- /.widget-body -->
                            </div><!-- /.signup-box -->
                        </div><!-- /.position-relative -->
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.main-content -->
    </div><!-- /.main-container -->
    <!-- basic scripts -->
    <!--[if !IE]><!-->
    <script src="@Url.Content("~/js/jquery-2.1.1.min.js")"></script>
    <!--<![endif]-->
    <!--[if IE]>
    <script src="@Url.Content("~/js/jquery-1.11.1.min.js")"></script>
    <![endif]-->
    <script type="text/javascript">
        if ('ontouchstart' in document.documentElement) document.write("<script src='@Url.Content("~/js/jquery.mobile.custom.min.js")'>" + "<" + "/script>");
    </script>
    <!-- inline scripts related to this page -->
    <script>
        var safeIP = "@ViewBag.safeIP" == "True";
        $(function () {
            $(document).on('click', '.toolbar a[data-target]', function (e) {
                e.preventDefault();
                var target = $(this).data('target');
                $('.widget-box.visible').removeClass('visible');//hide others
                $(target).addClass('visible');//show target
            });
            if (safeIP) {
                $("#labCode").removeClass('block').hide();
            }
            $("#imgCode").click(function () {
                $("#txtCode").val("");
                $("#imgCode").attr("src", "/Account/GetValidateCode" + "?id=" + new Date().getTime());
            });

            $("#btnLogin").click(function () {
                login();
            });
            document.onkeydown = function (e) {
                var ev = document.all ? window.event : e;
                if (ev.keyCode == 13) {
                    login();
                }
            }
            $("#txtName").focus();
        });
        function login() {

            var name = $("#txtName").val();
            if (name == "") {
                $("#txtTips").html("请输入用户名");
                return false;
            }
            var password = $("#txtPwd").val();
            if (password == "") {
                $("#txtTips").html("请输入密码");
                return false;
            }
            var validateCode = $("#txtCode").val();
            if (!safeIP) {
                if (validateCode == "") {
                    $("#txtTips").html("请输入验证码");
                    return false;
                }
            }

            $("#btnLogin").attr("disabled", "disabled").text("正在登录…");
            $.post("/Account/Login", { name: name, password: password, validateCode: validateCode }, function (data) {
                if (data.code == 200) {
                    $("#btnLogin").removeClass('width-35').text("登录成功跳转中…");
                        window.location.href = "/Main/Index";
                } else {
                    $("#btnLogin").removeAttr("disabled").text("登录");
                    $("#txtTips").html(data.msg);
                }
            });
        }
    </script>
</body>
</html>
